<template>
    <div class="WorkingSchedule" v-loading="loading">
        <div class="WorkingSchedule-one">
            <div>基本信息</div>
            <div>
                <div>款号：{{ detail.type_no }}</div>
                <div>服装短名称：{{ detail.type_name }}</div>
                <div>套装编码：{{ detail.package_number }}</div>
            </div>
            <div>
                <div>面料成分：</div>
                <div v-if="detail.fabric">
                    <div v-if="detail.fabric.lining_one">{{detail.fabric.lining_one}}</div>
                    <div v-if="detail.fabric.lining_two">{{detail.fabric.lining_two}}</div>
                    <div v-if="detail.fabric.lining_three">{{detail.fabric.lining_three}}</div>
                    <div v-if="detail.fabric.lining_four">{{detail.fabric.lining_four}}</div>
                    <div v-if="detail.fabric.lining_five">{{detail.fabric.lining_five}}</div>
                </div>
            </div>
        </div>
        <div class="WorkingSchedule-two">
            <div>基本信息</div>
            <el-form>
                <div>
                    <el-form-item label="套装类别" class="myform-item">
                        <el-select
                            v-model="oneid"
                            placeholder="请选择"
                            @change="onOneType($event, 1)"
                        >
                            <el-option
                                v-for="item in suitClass"
                                :key="item.title_en"
                                :label="item.title_en"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="尺码类别" class="myform-item" v-if="oneid && oneid != 3">
                        <el-select
                            v-model="twoid"
                            placeholder="请选择"
                            @change="onOneType($event, 2)"
                        >
                            <el-option
                                v-for="item in sizeClass"
                                :key="item.title_en"
                                :label="item.title_en"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="尺码范围" class="myform-item" v-if="twoid">
                        <el-select
                            v-model="threeid"
                            placeholder="请选择"
                            @change="onOneType($event, 3)"
                        >
                            <el-option
                                v-for="item in sizeRange"
                                :key="item.title_en"
                                :label="item.title_en"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-top: 50px" v-if="threeid && oneid != 3">
                        <div style="display:flex">
                            <div style="width: 300px">
                                <el-table :data="tableDataLeft" border size="mini">
                                    <el-table-column
                                        prop="title_ch"
                                        :label="title_ch"
                                        align="center"
                                    >
                                        <div
                                            slot-scope="{ row }"
                                            style="height: 40px;line-height: 40px;"
                                        >{{ row.title_ch }}</div>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <el-table :data="tableDataS" border style="width: 100%" size="mini">
                                <el-table-column
                                    :prop="item.title_ch"
                                    :label="item.title_ch"
                                    align="center"
                                    v-for="(item) in tableDataLeftsizerange"
                                    :key="item.id"
                                >
                                    <template slot-scope="scope">
                                        <el-select
                                            v-model="tableDataS[scope.$index][scope.column.label]"
                                            placeholder="请选择"
                                            @change="onScope($event, scope)"
                                        >
                                            <el-option
                                                v-for="item in options"
                                                :key="item.size"
                                                :label="item.size"
                                                :value="item.size"
                                            ></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-form-item>
                    <el-form-item style="margin-top: 50px" v-if="oneid == 3">
                        <el-table :data="tablechildren" border style="width: 100%" size="mini">
                            <el-table-column prop="height" label="身高(cm)" align="center"></el-table-column>
                            <el-table-column prop="childrenSize" label="童装尺码(cm)" align="center"></el-table-column>
                            <el-table-column prop="age" label="年龄(岁)" align="center"></el-table-column>
                            <el-table-column prop="size" label="尺码" align="center"></el-table-column>
                        </el-table>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item style="margin-top: 50px">
                        <el-button type="primary" @click="onSave">保存</el-button>
                        <!-- <el-button type="primary" @click="onAdd">新增指数类别</el-button> -->
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import { postAdminApiGetSuitCategory, postAdminApiGetSuitType, postAdminApiGetSuitRange, postAdminApiGetSuitRangeList, postAdminApiSetSuitSize, postAdminApiLookSuitSize } from "@/api"
export default {
    data() {
        return {
            loading: false,
            id: "",
            oneid: "",
            twoid: "",
            threeid: "",
            suitClass: [],
            sizeClass: [],
            sizeRange: [],
            title_ch: "",
            options: [
                {
                    size: '-'
                },
                {
                    size: 'XXS'
                },
                {
                    size: 'XS'
                },
                {
                    size: 'S'
                },
                {
                    size: 'M'
                },
                {
                    size: 'L'
                }
                ,
                {
                    size: 'XL'
                }
                ,
                {
                    size: 'XXL'
                }
            ],
            tablechildren: [
                {
                    height: "95-105",
                    childrenSize: "100",
                    age: "2-3",
                    size: "XXS"
                },
                {
                    height: "105-115",
                    childrenSize: "110",
                    age: "4-5",
                    size: "XS"
                },
                {
                    height: "115-125",
                    childrenSize: "120",
                    age: "6-7",
                    size: "S"
                },
                {
                    height: "125-135",
                    childrenSize: "130",
                    age: "8-9",
                    size: "M"
                },
                {
                    height: "135-145",
                    childrenSize: "140",
                    age: "10-11",
                    size: "L"
                }
            ],
            tableDataLeft: [],
            tableDataLeftsizerange: [],
            tableDataS: [],
            detail: ""
        }
    },
    async mounted() {
        this.id = this.$route.query.id
        this.postAdminApiGetSuitCategory()
        await this.postAdminApiLookSuitSize(this.id)

    },
    methods: {
        // 查看推荐尺码
        async postAdminApiLookSuitSize(id) {
            let obj = {
                id
            }
            await postAdminApiLookSuitSize(obj).then(async res => {
                console.log("res----------->", res);
                let data = res.data
                this.detail = data
                if (data.category_id) {
                    this.oneid = data.category_id
                    if (data.category_id != 3) {
                        
                        if (data.category_id) {
                            await this.postAdminApiGetSuitType()
                        }
                        this.twoid = data.type_id
                        if (data.type_id) {
                            await this.postAdminApiGetSuitRange()
                            let title_ch = this.sizeClass.filter(res => {
                                return res.id == data.type_id
                            })
                            this.title_ch = '身高/' + title_ch[0].title_ch
                        }
                        this.threeid = data.range_id
                        this.tableDataLeft = data.long_code
                        this.tableDataS = data.recommend_size_group
                        this.tableDataLeftsizerange = data.size_range
                    }
                }

            })
        },
        // 选择改变时
        async onOneType(e, type) {
            console.log("e---->", e);
            if (type == 1) {
                this.twoid = ""
                this.threeid = ""
                this.sizeClass = []
                this.tableDataLeft = []
                this.tableDataLeftsizerange = []
                this.tableDataS = []
                this.title_ch = ""
                await this.postAdminApiGetSuitType()
                console.log("sizeClass---->", this.sizeClass);
                return

            }


            if (type == 2) {
                this.threeid = ""
                this.sizeRange = []
                this.tableDataLeft = []
                this.tableDataLeftsizerange = []
                this.tableDataS = []
                this.title_ch = ""
                await this.postAdminApiGetSuitRange()
                console.log(this.sizeClass);
                let title_ch = this.sizeClass.filter(res => {
                    return res.id == e
                })
                console.log("title_ch--->", title_ch);
                this.title_ch = '身高/' + title_ch[0].title_ch
                return
            }

            if (type == 3) {
                return this.postAdminApiGetSuitRangeList()
            }
        },
        // 套装类别
        async postAdminApiGetSuitCategory() {
            await postAdminApiGetSuitCategory().then(res => {
                console.log("res------->", res);
                this.suitClass = res.data
            })
        },
        // 尺码类别
        async postAdminApiGetSuitType() {
            let obj = {
                fid: this.oneid
            }
            await postAdminApiGetSuitType(obj).then(res => {
                console.log("res------->", res);
                this.sizeClass = res.data
            })
        },
        // 尺码范围
        async postAdminApiGetSuitRange() {
            let obj = {
                fid: this.twoid
            }
            await postAdminApiGetSuitRange(obj).then(res => {
                console.log("res------->", res);
                this.sizeRange = res.data
            })
        },
        // 根据选择出尺码身高范围
        postAdminApiGetSuitRangeList() {
            let obj = {
                size_id: this.threeid,
                long_id: this.oneid
            }
            postAdminApiGetSuitRangeList(obj).then(res => {
                console.log("res------->", res);
                let long_code = res.data.long_code
                let size_range = res.data.size_range
                this.tableDataLeft = long_code
                this.tableDataLeftsizerange = size_range
                let arr = []
                long_code.forEach(element => {
                    let obj = {}
                    size_range.forEach(ele => {
                        obj[ele.title_ch] = "-"
                    })
                    arr.push(obj)
                });
                this.tableDataS = arr
                console.log('arr---->', arr);
            })
        },
        onScope(e, scope) {
            console.log("e---------->", e);
            console.log("scope---------->", scope);

        },
        onSave() {
            let { tableDataS, oneid, twoid, threeid, tablechildren, id } = this
            let obj = {
                id: id,
                recommend_size_group: tableDataS,
                category_id: oneid,
                type_id: twoid,
                range_id: threeid
            }
            if (oneid == 3) {
                obj.recommend_size_group = tablechildren
                postAdminApiSetSuitSize(obj).then(res => {
                    this.$message.success('保存成功')
                })
                this.$router.go(-1)
                return
            }
            if (oneid && twoid && threeid) {
                postAdminApiSetSuitSize(obj).then(res => {
                    this.$message.success('保存成功')
                })
                this.$router.go(-1)
                return
            }
            this.$message.warning('请填写完整内容')
        }
    }
}
</script>

<style lang="scss" scoped>
.WorkingSchedule {
    background: #ffff;
    padding: 20px;
    border-radius: 2px;
    @include boxShadow;
    .WorkingSchedule-one {
        > div:nth-child(1) {
            font-size: 24px;
            font-weight: 800;
        }
        > div:nth-child(2) {
            display: flex;
            line-height: 40px;
            > div {
                margin-right: 30px;
            }
        }
         > div:nth-child(3) {
             display: flex;
        }
    }
    .WorkingSchedule-two {
        > div:nth-child(1) {
            font-size: 24px;
            font-weight: 800;
            margin: 30px 0 20px;
        }
    }
}
</style>